<template>
  <div class="container">
    <div style="margin: 15px">
      指定宽度：
      <el-input v-model="width" />
      <el-button
        circle
        type="success"
        icon="el-icon-check"
        style="margin-left: 20px"
        @click="cut"
      ></el-button>
    </div>
    <section class="box">
      <xny-split-pane
        split="vertical"
        ref="splitPane"
        :min-percent="20"
        :default-percent="30"
        @resize="resize"
      >
        <template slot="paneL">
          <div class="boxItem boxA">A</div>
        </template>
        <template slot="paneR">
          <xny-split-pane split="horizontal">
            <template slot="paneL">
              <div class="boxItem boxB">B</div>
            </template>
            <template slot="paneR">
              <div class="boxItem boxC">C</div>
            </template>
          </xny-split-pane>
        </template>
      </xny-split-pane>
    </section>
  </div>
</template>

<script>
// import splitPane from 'vue-splitpane'

export default {
  name: 'SplitPaneDemo',
  data() {
    return {
      width: null,
    }
  },
  props: {},
  // components: { splitPane },
  watch: {},
  computed: {},
  methods: {
    resize(percent) {
      console.log('宽度变化值：', percent)
    },
    cut() {
      if (this.width) this.$refs.splitPane.percent = this.width
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped>
.container {
  height: 100%;
  width: 100%;
  text-align: center;
}
.box {
  width: 800px;
  height: 500px;
  margin: auto;
  border: 1px #ccc solid;
}
.boxItem {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  overflow: hidden;
}
.boxA {
  background: #e1f3d8;
}
.boxB {
  background: #faecd8;
}
.boxC {
  background: #fde2e2;
}
.el-input {
  width: 180px;
}
</style>
